<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
        <title>抖音</title>
        <link rel="stylesheet" href="video.css">
    </head>
<body>
    


        <div class="viewport">
            <div class="header">
                <a href="javascript:void(0)"></a>
                <ul>
                    <li>
                        <P></P>关注
                    </li>
                    <li>
                        <p></p>推荐
                    </li>
                </ul>
            </div>

            <div class="video">
                <!--中部视频部分-->
                <video  loop onclick="playPause()" class="video1">
                    <source src="./video1.mp4" type="video/mp4">
                </video>

                <ul class="r_click">
                    <!--视频右侧点击按钮-->
                    <li class="autou"></li>
                    <li class="like">
                        <div class="heart"></div>
                    </li>
                    <li class="comment"></li>
                    <li class="share"></li>
                </ul>
                <ul class="bottom">
                    <!--下方短视屏标题信息-->
                    <li class="message">
                        <h3>@支付宝那些事</h3>
                        <p class="last">
                            第35集 | <span> #程序员</span>程序员的基本礼仪了解一下，笑哭
                        </p>

                    </li>
                    <li class="r_cd">
                        <img src="./img/tou.jpg" alt="">
                    </li>
                </ul>
            </div>
            <div class="bottom_nav">
                <!--底部导航栏-->
                <ul>
                    <li class="home-page">首页</li>
                    <li class="region">深圳</li>
                    <li class="selfie">自拍</li>
                    <li class="news">消息</li>
                    <li class="me">我</li>
                </ul>
            </div>

            <div class="com">
                <div class="com-heard">
                    <p><span> 103</span>条评论</p>
                    <div class="exit">x</div>
                </div>
                <ul class="coms">
                    <li><div class="author"><img src="./img/tou.jpg" alt=""></div></li>
                    <li></li>
                   
                </ul>
                <form action="#">
                    <input type="text" name="textname" class="bala" value="输入你的评论">
                    <input type="button" value="发送" class="biu">
                </form>
            </div>

        </div>
        <script>

            function gethtmlfontSize() {
                var html = document.getElementsByTagName('html')[0];
                var htmlWidth = document.documentElement.clientWidth || document.body.clinetWidth;
                html.style.fontSize = 20 * (htmlWidth / 1080) + "px";

            };


            document.addEventListener("DOMContentLoaded", gethtmlfontSize);
            window.addEventListener("resize", gethtmlfontSize);
        </script>
        <script src="./video.js"></script>
        </body>

        </html>